<template>
  <div class="strategy-post">
    <div class="post-container">
      <!-- 顶部标题 -->
      <div class="post-header">
        <div class="header-left">
          <h2>
            <i class="icon-edit">✏️</i>
            发布攻略
          </h2>
          <div class="header-subtitle">分享你的旅行经验和心得</div>
        </div>
        <div class="header-actions">
          <el-button type="text" @click="cancelForm">取消</el-button>
          <el-button type="primary" round @click="saveForm" :disabled="isSaved">保存</el-button>
          <el-button type="success" round @click="submitForm" :disabled="!isSaved">发布</el-button>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="post-content">
        <!-- 表单区域 -->
        <div class="form-section">
          <!-- 标题和内容 -->
          <div class="form-group">
            <el-input
              v-model="form.strategy_name"
              placeholder="输入攻略标题"
              class="title-input"
              maxlength="30"
              show-word-limit
            />
            <div class="word-count">{{ form.strategy_name.length }}/30</div>
          </div>

          <div class="form-group content-box">
            <div ref="editorContainer" class="quill-editor" />
          </div>

     <!-- 基本信息卡片 -->
<div class="info-card">
  <div class="card-header">
    <h3>基本信息</h3>
    <el-button type="text" @click="toggleCard('basic')">
      {{ expandedCards.basic ? '收起' : '展开' }}
    </el-button>
  </div>
  <div v-show="expandedCards.basic" class="card-content">
    <el-form label-width="100px">
      <el-row :gutter="20">
        <!-- 第一排：省份 + 关联跟团游 -->
        <el-col :span="12">
          <el-form-item label="省份">
            <el-select 
              v-model="form.province" 
              filterable 
              placeholder="请选择省份" 
              style="width: 100%"
              @change="handleProvinceChange"
            >
              <el-option 
                v-for="item in provinceOptions" 
                :key="item" 
                :label="item" 
                :value="item" 
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联跟团游">
            <el-select
              v-model="form.group_tour_id"
              filterable
              placeholder="请先选择景点"
              clearable
              style="width: 100%"
              :disabled="!form.scenic_spot_id"
            >
              <el-option
                v-for="tour in filteredGroupTours"
                :key="tour.groupTourId"
                :label="tour.groupTourName"
                :value="tour.groupTourId"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 第二排：城市 + 发布时间 -->
        <el-col :span="12">
          <el-form-item label="城市">
            <el-select 
              v-model="form.city" 
              filterable 
              placeholder="请选择城市" 
              style="width: 100%"
            >
              <el-option 
                v-for="item in cityOptions" 
                :key="item" 
                :label="item" 
                :value="item" 
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发布时间">
            <el-input 
              v-model="form.modificationTime" 
              placeholder="自动生成" 
              readonly
              style="width: 100%"
            />
          </el-form-item>
        </el-col>

        <!-- 第三排：关联景点（单独一行） -->
        <el-col :span="12">
          <el-form-item label="关联景点">
            <el-select
              v-model="form.scenic_spot_id"
              filterable
              placeholder="请选择景点"
              style="width: 100%"
              @change="handleScenicSpotChange"
            >
              <el-option
                v-for="spot in scenicSpots"
                :key="spot.scenicSpotId"
                :label="spot.scenicAreaName"
                :value="spot.scenicSpotId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</div>
</div>
        </div>

        <!-- 图片上传区域 -->
        <div class="upload-section">
          <div class="upload-title">
            <span>图片编辑</span>
            <span class="count">{{ strategyImages.length }}/6</span>
          </div>
          <div class="image-grid">
            <!-- 已上传的图片 -->
            <div v-for="(img, index) in strategyImages" :key="index" class="grid-item">
              <el-image 
                :src="img.strategyImageLink" 
                :preview-src-list="strategyImages.map(i => i.strategyImageLink)" 
                fit="cover" 
                class="grid-image" 
              />
              <el-button 
                class="delete-btn" 
                type="danger" 
                :icon="Close" 
                circle 
                size="small"
                @click.stop="handleDeleteImage(img.strategyImageId)"
              />
            </div>

            <!-- 上传按钮 -->
            <div v-for="i in 6 - strategyImages.length" :key="'empty-' + i" class="grid-item empty-placeholder">
              <el-upload 
                class="plus-upload" 
                action="#" 
                :show-file-list="false" 
                :http-request="handleUploadImage"
                :before-upload="beforeUpload"
                :disabled="!isSaved"
              >
                <el-icon class="placeholder-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 发布成功弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="发布成功"
      width="400px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialog-content">
        <el-icon color="#67C23A" :size="60"><CircleCheck /></el-icon>
        <p class="dialog-message">攻略发布成功！</p>
      </div>
      <template #footer>
        <el-button type="primary" @click="handleDialogClose">确定</el-button>
      </template>
    </el-dialog>

    <!-- 保存成功弹窗 -->
    <el-dialog
      v-model="saveDialogVisible"
      title="保存成功"
      width="400px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialog-content">
        <el-icon color="#67C23A" :size="60"><CircleCheck /></el-icon>
        <p class="dialog-message">攻略信息已保存，请继续上传图片后发布！</p>
      </div>
      <template #footer>
        <el-button type="primary" @click="saveDialogVisible = false">确定</el-button>
      </template>
    </el-dialog>

    <!-- 取消发布弹窗 -->
    <el-dialog
      v-model="cancelDialogVisible"
      title="取消发布"
      width="400px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialog-content">
        <el-icon color="#E6A23C" :size="60"><Warning /></el-icon>
        <p class="dialog-message">已取消发布并删除保存的信息！</p>
      </div>
      <template #footer>
        <el-button type="primary" @click="handleCancelDialogClose">确定</el-button>
      </template>
    </el-dialog>

</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Plus, CircleCheck, Close, Warning } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
import Quill from 'quill'
import 'quill/dist/quill.snow.css'

const router = useRouter()

// 初始表单数据
const initialFormData = {
  strategy_name: '',
  strategy_content: '',
  scenic_spot_id: null,
  province: '',
  city: '',
  region_id: null,
  user_id: null,
  group_tour_id: null,
  modificationTime: new Date().toLocaleString()
}

const form = ref({...initialFormData,
  scenic_spot_id: null,
  group_tour_id: null,
})
const strategyImages = ref([])
const scenicSpots = ref([])
const groupTours = ref([])
const filteredGroupTours = ref([])
const provinceOptions = ref([])
const cityOptions = ref([])
const regionMap = ref({})
const expandedCards = ref({
  basic: true
})
const dialogVisible = ref(false)
const saveDialogVisible = ref(false)
const cancelDialogVisible = ref(false)
const isSaved = ref(false)

// 富文本编辑器相关
const editorContainer = ref(null)
let quillInstance = null

// 获取当前用户ID
const getUserId = async () => {
  try {
    const loginId = localStorage.getItem('loginId');
    if (!loginId) {
      ElMessage.error('请先登录');
      router.push('/login');
      return;
    }
    
    const response = await axios.get(`http://localhost:8080/mw/UserByLoginId?loginId=${loginId}`);
    const userInfo = response.data || {};
    
    form.value.user_id = userInfo.userId || null;
    
    if (!form.value.user_id) {
      ElMessage.error('无法获取用户ID');
      router.push('/login');
    }
    
    localStorage.setItem('userId', form.value.user_id);
  } catch (error) {
    console.error('获取用户ID失败:', error);
    ElMessage.error('获取用户信息失败');
    router.push('/login');
  }
}

// 加载地区选项
const loadRegionOptions = async () => {
  try {
    const response = await axios.get('http://localhost:8080/api/regions')
    const regions = response.data || []
    provinceOptions.value = [...new Set(regions.map(r => r.province))]
    regionMap.value = {}
    regions.forEach(r => {
      if (!regionMap.value[r.province]) regionMap.value[r.province] = []
      regionMap.value[r.province].push(r.city)
    })
  } catch (error) {
    console.error('加载地区选项失败:', error)
  }
}

// 加载景点列表
const loadScenicSpots = async () => {
  try {
    const response = await axios.get('http://localhost:8080/mw/ScenicSpotList')
    scenicSpots.value = response.data || []
  } catch (error) {
    console.error('加载景点列表失败:', error)
  }
}

// 省份变化处理
const handleProvinceChange = (val) => {
  cityOptions.value = regionMap.value[val] || []
  if (!cityOptions.value.includes(form.value.city)) {
    form.value.city = ''
  }
}

// 选择景点时自动带出省份和城市
const handleScenicSpotChange = async (scenicSpotId) => {
  form.value.group_tour_id = null
  
  if (scenicSpotId) {
    const selectedSpot = scenicSpots.value.find(s => s.scenicSpotId === scenicSpotId);
    if (selectedSpot) {
      filteredGroupTours.value = groupTours.value.filter(
        tour => tour.scenicAreaName === selectedSpot.scenicAreaName
      );
    }
  } else {
    filteredGroupTours.value = []
  }
  
  const spot = scenicSpots.value.find(s => s.scenicSpotId === scenicSpotId)
  if (spot && spot.regionId) {
    try {
      const regionResponse = await axios.get('http://localhost:8080/api/regions')
      const regions = regionResponse.data || []
      const region = regions.find(r => r.regionID === spot.regionId)
      if (region) {
        form.value.province = region.province
        form.value.city = region.city
        cityOptions.value = regionMap.value[region.province] || []
      }
    } catch (error) {
      console.error('获取地区信息失败:', error)
    }
  }
}

// 加载所有跟团游列表
const loading = ref(false);

const loadGroupTours = async () => {
  loading.value = true;
  try {
    const response = await axios.get('http://localhost:8080/mw/auditGroupTours')
    groupTours.value = response.data || []
    filteredGroupTours.value = []
  } catch (error) {
    console.error('加载跟团游列表失败:', error)
    ElMessage.error('加载跟团游列表失败')
  } finally {
    loading.value = false;
  }
}

// 加载攻略图片
const loadStrategyImages = async (strategyId) => {
  if (!strategyId) return
  try {
    const response = await axios.get(`http://localhost:8080/ts/images/${strategyId}`)
    strategyImages.value = response.data || []
  } catch (error) {
    console.error('加载攻略图片失败:', error)
    ElMessage.error('加载图片失败')
  }
}

// 上传前检查
const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt5M = file.size / 1024 / 1024 < 5
  if (!isImage) {
    ElMessage.error('只能上传图片文件！')
    return false
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过5MB！')
    return false
  }
  return true
}

// 上传图片
const handleUploadImage = async (options) => {
  const { file } = options
  if (!form.value.strategy_id) {
    ElMessage.error('请先保存基本信息再上传图片')
    return
  }
  
  const formData = new FormData()
  formData.append('file', file)
  formData.append('strategyId', form.value.strategy_id.toString())

  try {
    const response = await axios.post('http://localhost:8080/ts/uploadImage', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    
    if (response.data.success) {
      ElMessage.success('图片上传成功')
      await loadStrategyImages(form.value.strategy_id)
    } else {
      ElMessage.error(response.data.message || '图片上传失败')
    }
  } catch (error) {
    console.error('上传图片失败:', error)
    ElMessage.error('图片上传失败: ' + (error.response?.data?.message || error.message))
  }
}

// 删除图片
const handleDeleteImage = async (imageId) => {
  try {
    await ElMessageBox.confirm('确定要删除这张图片吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await axios.delete(`http://localhost:8080/strategy/images/${imageId}`)
    if (response.data.success) {
      ElMessage.success('图片删除成功')
      await loadStrategyImages(form.value.strategy_id)
    } else {
      ElMessage.error(response.data.message || '图片删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除图片失败:', error)
      ElMessage.error('删除图片失败')
    }
  }
}

const toggleCard = (card) => {
  expandedCards.value[card] = !expandedCards.value[card]
}

// 生成攻略ID
const generateStrategyId = async () => {
  try {
    const response = await axios.get('http://localhost:8080/ts/list')
    const strategies = response.data || []
    const maxId = strategies.length > 0 ? Math.max(...strategies.map(t => t.strategyId)) : 0
    form.value.strategy_id = maxId + 1
  } catch (error) {
    console.error('生成攻略ID失败:', error)
    form.value.strategy_id = Math.floor(Math.random() * 1000000) + 1
  }
}

// 富文本编辑器图片上传处理
const handleImageUpload = () => {
  const input = document.createElement('input')
  input.setAttribute('type', 'file')
  input.setAttribute('accept', 'image/*')
  input.click()

  input.onchange = async () => {
    const file = input.files[0];
    if (!file) return;

    const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
    if (!validTypes.includes(file.type)) {
      ElMessage.error('只支持上传 JPG/PNG/GIF/WEBP 格式的图片')
      return
    }

    if (file.size > 5 * 1024 * 1024) {
      ElMessage.error('图片大小不能超过5MB')
      return
    }

    const formData = new FormData();
    formData.append('file', file);

    try {
      const res = await axios({
        url: '/strategy/image/upload-image',
        method: 'post',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })

      if (res.data && res.data.url) {
        let imageUrl = res.data.url;
        
        if (!imageUrl.startsWith('http')) {
          const baseUrl = 'http://localhost:8080';
          imageUrl = baseUrl + imageUrl;
        }

        const range = quillInstance.getSelection();
        quillInstance.insertEmbed(range.index, 'image', imageUrl);
        ElMessage.success('图片上传成功');
      } else {
        ElMessage.error('图片上传失败: 未获取到图片URL');
      }
    } catch (err) {
      console.error('上传错误:', err);
      ElMessage.error(err.response?.data?.message || '图片上传失败');
    }
  }
}

// 保存表单
const saveForm = async () => {
  form.value.modificationTime = new Date().toISOString()
  form.value.strategy_content = quillInstance.root.innerHTML
  
  const errors = []
  if (!form.value.strategy_name.trim()) {
    errors.push('请输入攻略标题')
  }
  if (!form.value.strategy_content.trim() || form.value.strategy_content === '<p><br></p>') {
    errors.push('请输入攻略内容')
  }
  if (!form.value.scenic_spot_id) {
    errors.push('请选择景点')
  }
  if (!form.value.province || !form.value.city) {
    errors.push('请选择省份和城市')
  }
  
  if (errors.length > 0) {
    ElMessage.error(errors.join('，'))
    return
  }

  try {
    const regionResponse = await axios.get('http://localhost:8080/api/regions')
    const regions = regionResponse.data || []
    const region = regions.find(r => r.province === form.value.province && r.city === form.value.city)
    if (!region) {
      ElMessage.error('请选择有效的省份和城市')
      return
    }
    form.value.region_id = region.regionID
  } catch (error) {
    console.error('获取地区ID失败:', error)
    ElMessage.error('获取地区信息失败')
    return
  }

  if (!form.value.strategy_id) {
    await generateStrategyId()
  }

  const submitData = {
    strategyId: form.value.strategy_id,
    strategyName: form.value.strategy_name,
    regionId: form.value.region_id,
    userId: form.value.user_id,
    scenicSpotId: form.value.scenic_spot_id,
    groupTourId: form.value.group_tour_id,
    strategyContent: form.value.strategy_content
  }

  try {
    const response = await axios.post('http://localhost:8080/ts/insert', submitData)
    if (response.data) {
      isSaved.value = true
      saveDialogVisible.value = true
      await loadStrategyImages(form.value.strategy_id)
    }
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error(`保存失败: ${error.response?.data?.message || error.message}`)
  }
}

// 提交表单
const submitForm = async () => {
  if (!isSaved.value) {
    ElMessage.error('请先保存基本信息')
    return
  }

  dialogVisible.value = true
}

const handleDialogClose = () => {
  dialogVisible.value = false
  resetForm()
}

const handleCancelDialogClose = () => {
  cancelDialogVisible.value = false
  resetForm()
}

const resetForm = () => {
  form.value = {...initialFormData}
  strategyImages.value = []
  isSaved.value = false
  expandedCards.value = {
    basic: true
  }
  getUserId()
  quillInstance.root.innerHTML = ''
}

const cancelForm = async () => {
  if (!isSaved.value) {
    resetForm()
    ElMessage.success('表单已重置')
    return
  }

  try {
    await ElMessageBox.confirm('确定要取消发布并删除已保存的信息吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    for (const image of strategyImages.value) {
      try {
        await axios.delete(`http://localhost:8080/ts/images/${image.strategyImageId}`)
      } catch (error) {
        console.error('删除图片失败:', error)
      }
    }
    
    try {
      await axios.delete(`http://localhost:8080/ts/delete/${form.value.strategy_id}`)
    } catch (error) {
      console.error('删除攻略信息失败:', error)
    }
    
    cancelDialogVisible.value = true
  } catch (error) {
    if (error !== 'cancel') {
      console.error('取消发布失败:', error)
      ElMessage.error('取消发布失败')
    }
  }
}

onMounted(() => {
  quillInstance = new Quill(editorContainer.value, {
    theme: 'snow',
    placeholder: '请输入攻略内容...',
    modules: {
      toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [{ header: 1 }, { header: 2 }],
          [{ list: 'ordered' }, { list: 'bullet' }],
          [{ script: 'sub' }, { script: 'super' }],
          [{ indent: '-1' }, { indent: '+1' }],
          [{ direction: 'rtl' }],
          [{ size: ['small', false, 'large', 'huge'] }],
          [{ header: [1, 2, 3, 4, 5, 6, false] }],
          [{ color: [] }, { background: [] }],
          [{ font: [] }],
          [{ align: [] }],
          ['clean'],
          ['image']
        ],
        handlers: {
          image: handleImageUpload
        }
      }
    }
  })

  quillInstance.on('text-change', () => {
    form.value.strategy_content = quillInstance.root.innerHTML
  })

  loadRegionOptions()
  loadScenicSpots()
  loadGroupTours()
  getUserId()
  
  form.value.modificationTime = new Date().toLocaleString()
  
  const id = router.currentRoute.value.query.id
  if (id) {
    loadStrategyImages(id)
  }
})
</script>

<style scoped>
.strategy-post {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

.post-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* 页面头部样式 */
.post-header {
  padding: 24px 32px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

.header-left h2 {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-edit {
  font-size: 24px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.header-subtitle {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0;
}

.header-actions .el-button {
  padding: 8px 16px;
  margin-left: 8px;
}

.post-content {
  padding: 0 24px 24px;
}

.upload-section {
  margin-bottom: 24px;
  padding-top: 16px;
}

.upload-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 15px;
  color: #333;
}

.upload-title .count {
  color: #999;
  font-size: 13px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  margin-top: 20px;
  width: 100%;
}

.grid-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 10px;
  min-height: 150px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px dashed #dcdfe6;
}

.grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.grid-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
  transition: transform 0.3s ease;
}

.grid-image:hover {
  transform: scale(1.05);
}

.delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  opacity: 0.8;
}

.empty-placeholder {
  border-style: dashed;
  background-color: #fafafa;
}

.placeholder-icon {
  font-size: 24px;
  color: #909399;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.placeholder-icon:hover {
  color: #409eff;
  transform: scale(1.1);
}

.empty-placeholder:hover {
  border-color: #409eff;
  background-color: #f0f7ff;
}

.plus-upload {
  display: contents;
}

.form-group {
  margin-bottom: 24px;
}

.title-input {
  font-size: 18px;
  font-weight: 600;
}

.title-input :deep(.el-input__inner) {
  border: none;
  padding: 0;
  height: auto;
  font-size: 18px;
  font-weight: 600;
}

.word-count {
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.content-box {
  background: #fafafa;
  padding: 16px;
  border-radius: 8px;
}

/* Rich Text Editor Styles */
.quill-editor {
  width: 100%;
  min-height: 320px;
  height: auto;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 12px;
  background: #f9f9f9;
  transition: box-shadow 0.3s ease;
  box-sizing: border-box;
}

.quill-editor:focus-within {
  box-shadow: 0 0 0 2px #409eff40;
}

.quill-editor :deep(.ql-toolbar) {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom: 1px solid #dcdfe6;
}

.quill-editor :deep(.ql-container) {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  min-height: 250px;
}

.quill-editor :deep(.ql-editor) {
  min-height: 250px;
  font-size: 14px;
  line-height: 1.6;
}

.info-card {
  background-color: #fafafa;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.card-content {
  padding-top: 8px;
}

:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-form-item__label) {
  color: #666;
  font-weight: normal;
}

.dialog-content {
  text-align: center;
  padding: 20px 0;
}

.dialog-message {
  margin-top: 20px;
  font-size: 16px;
  color: #333;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .strategy-post {
    padding: 16px;
  }
  
  .post-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .image-grid {
    grid-template-columns: 1fr;
  }
  
  .header-actions {
    margin-top: 12px;
  }
}

@media (max-width: 480px) {
  .post-header {
    padding: 20px;
  }
  
  .header-left h2 {
    font-size: 24px;
  }
  
  .quill-editor {
    min-height: 200px;
  }
}
</style>